<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :model="state.param" :inline="true">
					<el-form-item label="品牌搜索：">
							<el-input v-model="state.param.keyWords"  placeholder="请输入品牌名/ID" clearable></el-input>
						</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="addBrand('add',{})">
							<el-icon>
								<ele-Plus />
							</el-icon> 新 增
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
				<section style="display: flex;flex-direction: column; flex: 1;height: inherit;">
					<el-table :data="state.tableData" row-key="id" ref="goodTableRef" v-loading="state.loading">
						<el-table-column label="编号" width="80">
							<template #default="scope">
								<span>{{ scope.row.brandId }}</span>
							</template>
						</el-table-column>

						<el-table-column label="品牌名称" >
							<template #default="scope">
								<span>{{ scope.row.brandName }}</span>
							</template>
						</el-table-column>
						<el-table-column label="品牌图标" align="center">
							<template #default="scope">
								<el-image style="width:32px;height: 32px;" :src="scope.row.brandLogo"
									fit="cover" />
							</template>
						</el-table-column>

						<el-table-column label="品牌类型" >
							<template #default="scope">
								<span>{{ scope.row.isForeignName }}</span>
							</template>
						</el-table-column>

						<el-table-column label="品牌持有商" >
							<template #default="scope">
								<span>{{ scope.row.company }}</span>
							</template>
						</el-table-column>

						<el-table-column label="来源" >
							<template #default="scope">
								<span>{{ scope.row.sourceName }}</span>
							</template>
						</el-table-column>
						
						<el-table-column label="创建人" >
							<template #default="scope">
								<span>{{ scope.row.updateBy }}</span>
							</template>
						</el-table-column>
						<el-table-column label="创建时间" >
							<template #default="scope">
								<span>{{ scope.row.createdTime }}</span>
							</template>
						</el-table-column>

						<el-table-column label="操作" >
							<template #default="scope"> 
								<el-button text type="primary"  @click="addBrand('edit',scope.row)">
									编辑
								</el-button>&emsp;
								<el-button text type="danger" @click="deleteHandle(scope.$index,scope.row)">
									删除
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-row justify="end">
						<el-col :span="24" class="flex-end-center">
							<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
								:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.param.pageNum" background
								v-model:page-size="state.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
								:total="state.total">
							</el-pagination>
						</el-col>
					</el-row>
				</section>
			</el-card>
		</div>
		<addBrandDialog ref="addBrandDialogRef" @refresh="getBrandList()"/>
	</div>
</template>

<script setup lang="ts" name="pagesTree">
import { onMounted, reactive, ref,defineAsyncComponent } from 'vue';
import { brandList, brandDelete } from '/@/api/commodity';
import { ElMessageBox,ElMessage} from 'element-plus';
const addBrandDialog = defineAsyncComponent(() => import('/@/views/commodity/brandManage/components/addBrandDialog.vue'  ))
// 定义变量内容
const addBrandDialogRef = ref();
const state = reactive({
	loading: false,
	param: {
		keyWords: '',
		pageNum: 1,
		pageSize: 10,
	},
	total: 0,
	tableData: [] as Array<any>
});


// 获取商品品牌列表
const getBrandList = async () => {
	state.loading = true;//不用传参， 请求得入参在上面都定义了 param这里吗？
	let params = {
		pageNum: state.param.pageNum,
		pageSize: state.param.pageSize,
	}
	const { results } = await brandList(params);
	state.tableData = results.records;
	state.total = results.total;
	state.loading = false;
}

// 打开新增编辑分类弹窗
const addBrand = (type: string, row ?: Object) => {
	addBrandDialogRef.value.openDialog(type, row, );
};

// 品牌删除
const deleteHandle = (index: number,row: any) => {
	ElMessageBox.confirm( '确定删除该品牌?','提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	} ).then( async () => {
		const ok = await brandDelete(row.brandId);
		state.tableData.splice(index,1)
		return ElMessage.success('删除成功');
    }).catch(() => {

    })
}

// 分页点击 条数
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
	getBrandList();
};
// 分页点击
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
	getBrandList();
};

// 页面加载时
onMounted(() => {
	getBrandList();
});

</script>

<style scoped lang="scss">
@import '../../../theme/mixins/index.scss';
:deep(.el-card__body){
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-table{
		flex: 1;
		.el-table__inner-wrapper::before{
			background: none !important;
		}
	}
}
</style>

